<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="计划名称" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入计划名称" clearable />
      </el-form-item>
      <el-form-item label="排查频次" prop="ListTypeId">
        <el-select v-model="queryParams.ListTypeId" placeholder="请选择排查频次" clearable>
          <el-option v-for="(item, index) in dateTypeOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="commonButtons">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="计划名称" prop="title" width="200" :show-overflow-tooltip="true" />
      <el-table-column label="计划内容" prop="remark" />
      <el-table-column label="有效时间" align="center" prop="dateRange">
        <template slot-scope="scope">
          <span v-if="scope.row.dateRange != null">
            <span>{{ scope.row.dateRange[0] }}</span>
            <span>至</span>
            <span>{{ scope.row.dateRange[1] }}</span>
          </span>
          <span v-else style="color: red">未设置有效时间</span>
        </template>
      </el-table-column>
      <el-table-column label="检查频次" align="center" prop="excludeFrequency">
        <template slot-scope="scope">
          <span v-if="scope.row.excludeFrequency != null">
            {{ scope.row.excludeFrequency }}次/{{ scope.row.dateTypeName }}
          </span>
          <span v-else style="color: red">未设置排查频次</span>
        </template>
      </el-table-column>
      <el-table-column label="排查类别" align="center" prop="excludeType">
        <template slot-scope="scope">
          <div>{{ getString(scope.row.excludeType) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="允许生成任务" align="center" prop="isTask">
        <template slot-scope="scope">
          <i class="el-icon-check" v-if="scope.row.isTask == '1'"></i>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleConfig(scope.row)">设置</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <AddDialog :visible.sync="dialogVisible" v-if="dialogVisible" @refresh="getList" :data="selectRow" :title="title"
      :operateType="operateType"></AddDialog>
    <ConfigDialog :visible.sync="configDialogVisible" v-if="configDialogVisible" @refresh="getList" :data="selectRow"
      :title="title" :operateType="operateType" :dateTypeOptions="dateTypeOptions" :dict="dict">
    </ConfigDialog>
  </div>
</template>
<script>
import refreshMixin from "@/common/refreshMixin"
import AddDialog from "./components/addDialog.vue"
import ConfigDialog from "./components/configDialog.vue"
import { getDataList, deletedData, getDateType } from "./api"
export default {
  name: "Plan",
  mixins: [refreshMixin],
  components: { AddDialog, ConfigDialog },
  dicts: ["biz_exclude_type"],
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      showSearch: true,
      dateTypeOptions: [],
      queryParams: {
        pageNum: 0,
        pageSize: 10,
        title: null,
        dateType: null,
        ListTypeId:null,
      },
      title: "",
      dialogVisible: false,
      configDialogVisible: false,
      selectRow: {},
      operateType: 'view',
      ids: []
    }
  },
  methods: {
    getString(string) {
      if (!string || !string.length) {
        return ""
      }
      const buffer = string.split(",").map(item => {
        const res = this.dict.type.biz_exclude_type.find(sItem => sItem.value == item)
        return res.label
      })
      return buffer.join(" ")
    },
    async getList() {
      if (!this.dateTypeOptions.length) {
        const dateTypeRes = await getDateType();
        this.dateTypeOptions = dateTypeRes.data.map(item => ({
          label: item.checkTypeName,
          value: item.id.toString(),
        }))
      }
      this.loading = true;
      const params = { ...this.queryParams, projectId: this.projectId }
      const res = await getDataList(params)
      this.list = res.rows
      this.total = res.total
      this.loading = false;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    handleView(row) {
      this.operateType = 'view'
      this.selectRow = { ...row }
      this.title = "质量检查计划详情";
      this.dialogVisible = true;
    },
    handleAdd() {
      this.operateType = 'add'
      this.selectRow = {};
      this.title = "新增质量检查计划";
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.operateType = 'edit'
      this.selectRow = { ...row }
      this.title = "编辑质量检查计划";
      this.dialogVisible = true;
    },
    handleConfig(row) {
      this.operateType = 'config'
      this.selectRow = { ...row }
      this.title = "配置质量检查计划";
      this.configDialogVisible = true;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    async handleDelete(row) {
      const res = await this.$confirm('是否确认删除编号为' + row.id + '的数据项？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      if (res == 'confirm') {
        const res1 = await deletedData(row.id);
        if (res1.code == 200) {
          this.getList();
          this.$message.success("删除成功")
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.commonButtons {
  margin-bottom: 10px;
}
</style>